<script setup>
import { reactive, ref } from "vue";
import Table from "../../../components/Table/table";
import Pagination from "../../../components/Pagination/Pagination";
import { roleListApi, delRoleApi } from "@/api/auth";
import { peopleTable } from "@/hooks/auth";
import { useState } from "@/hooks/index";
import addForm from "./addForm.vue";
import { ElMessage } from "element-plus";
import { formatTimes } from '@/hooks/time.js';
// ===============
const defaultData = {
  current: 1,
  pageSize: 10,
  create_time: null,
  nane: null,
  status: null,
};
const list = ref([]);
const total = ref(0);
const addRef = ref();

//
const statusList = useState();
// =============
const queryData = reactive(defaultData);
const initData = async () => {
  let res = await roleListApi(queryData);
  list.value = res.data.rows;
  total.value = res.data.count;
};
onMounted(() => {
  initData();
});

// 显示状态文字
const showState = (val) => {
  let res = statusList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// ============
// 筛选
const onSubmit = () => {
  queryData.current = 1;
  initData();
};
// 搜索取消
const onReset = () => {
  queryData.name = null;
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    create_time: null,
    nane: null,
    status: null,
  });
  initData();
};
// 回显
const edit = async (id) => {
  addRef.value.replyData(id)
  addRef.value.isShow = true
}
// 删除
const del = async (id) => {
  let res = await delRoleApi(id)
  ElMessage.success(res.msg)
  initData()
}
</script>
<template>
  <div>
    <div style="margin: 20px">
      <el-card shadow="always">
        <el-form ref="form" label-width="80px" :inline="true" size="normal" label-position="top">
          <el-form-item label="角色名称">
            <el-input placeholder="请输入" v-model="queryData.name"></el-input>
          </el-form-item>
          <el-form-item label="角色状态">
            <!-- 下拉框 -->
            <el-select v-model="queryData.status" class="m-2" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div style="margin: 30px">
              <el-button type="primary" @click="onSubmit">搜索</el-button>
              <el-button @click="onReset">重置</el-button>
            </div>
          </el-form-item>
        </el-form>

        <!-- 工具区域 -->
        <el-row type="flex" justify="space-between">
          <div></div>
          <div>
            <el-button type="primary" @click="addRef.isShow = true">添加信息</el-button>
          </div>
        </el-row>

      </el-card>
    </div>
    <div style="margin: 20px">
      <el-card shadow="always">
        <!-- 表格 -->
        <Table :table="peopleTable" :tableData="list" @edit="edit" @del="del">
          <template #status="{ row }">
            {{ showState(row.status) }}
          </template>
          <template #create_time="{ row }">
            {{ formatTimes(row.create_time) }}
          </template>
        </Table>
        <!-- 分页器 -->
        <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
          @initData="initData"></Pagination>
      </el-card>
      <addForm ref="addRef" @updateList="initData"></addForm>
    </div>
  </div>
</template>

<style scoped></style>
